<template>
  <div class="h-full flex relative">
    <!-- 左侧文档区域 - 这里是滚动容器 -->
    <div class="flex-1 overflow-y-auto" ref="scrollContainer" id="document-scroll-area">
      <n-space vertical :size="16" class="p-4">

        <div id="page-1-cover"
          class="mx-auto max-w-[500px] w-full min-w-[500px] aspect-[210/297] bg-gray-50 shadow-lg rounded-md p-8 md:p-12">
          <div class="h-full flex flex-col justify-center items-center text-center">
            <div class="flex-grow flex flex-col justify-center items-center">
              <p class="text-3xl font-bold tracking-[0.5em]">中 国 共 产 党</p>
              <p class="text-4xl font-bold mt-12 tracking-widest">入 党 志 愿 书</p>
            </div>
            <p class="text-xl mb-12">
              申请人姓名
              <span class="underline underline-offset-4 px-12">{{ member.memberName }}</span>
            </p>
          </div>
        </div>

        <div id="page-2-instructions"
          class="mx-auto max-w-[500px] w-full min-w-[500px] aspect-[210/297] bg-gray-50 shadow-lg rounded-md p-8 md:p-12">
          <h2 class="text-center font-bold text-3xl tracking-[1em] mb-8">说 &nbsp;&nbsp;明</h2>
          <div class="text-base leading-loose space-y-4">
            <p>一、申请人填写入党志愿书要严肃、认真、忠实。填写前，党支部负责人或入党介绍人应将表内项目向申请人解读清楚。</p>
            <p>二、填写入党志愿书须使用钢笔、签字笔或毛笔，并使用黑色或蓝黑色墨水。字迹要清晰、工整。表内年、月、日一律用公历和阿拉伯数字。表内栏目没有内容填写时，应注明“无”。个别栏目写不下时，可附加页。
              在上级党组织批准预备党员转为正式党员后，应及时将入党志愿书存入本人档案，没有档案的，由基层党委保存。</p>
          </div>
        </div>

        <div id="page-3-oath"
          class="mx-auto max-w-[500px] w-full min-w-[500px] aspect-[210/297] bg-gray-50 shadow-lg rounded-md p-8 md:p-12">
          <h2 class="text-center font-bold text-3xl tracking-[1em] mb-12">誓 &nbsp;&nbsp;词</h2>
          <p class="indent-8 text-xl leading-loose">
            我志愿加入中国共产党，拥护党的纲领，遵守党的章程，履行党员义务，执行党的决定，严守党的纪律，保守党的秘密，对党忠诚，积极工作，为共产主义奋斗终身，随时准备为党和人民牺牲一切，永不叛党。
          </p>
        </div>

        <div id="page-4-info"
          class="mx-auto max-w-[500px] w-full min-w-[500px] bg-gray-50 shadow-lg rounded-md p-6 text-sm">
          <table class="w-full border-collapse">
            <tbody>
              <tr>
                <td class="p-1 font-bold border border-black text-center w-[20%]">姓名</td>
                <td class="p-1 border border-black text-center w-[20%]">{{ member.memberName }}</td>
                <td class="p-1 font-bold border border-black text-center w-[20%]">性别</td>
                <td class="p-1 border border-black text-center w-[20%]">{{ member.genderType }}</td>
                <td rowspan="4" class="p-1 border border-black text-center align-middle">正面免冠照片<br>（2寸）</td>
              </tr>
              <tr>
                <td class="p-1 font-bold border border-black text-center">民族</td>
                <td class="p-1 border border-black text-center">{{ member.nationalityDesc }}</td>
                <td class="p-1 font-bold border border-black text-center">出生年月</td>
                <td class="p-1 border border-black text-center">{{ member.birthDate }}</td>
              </tr>
              <tr>
                <td class="p-1 font-bold border border-black text-center">籍贯</td>
                <td class="p-1 border border-black text-center">{{ member.birthPlace }}</td>
                <td class="p-1 font-bold border border-black text-center">出生地</td>
                <td class="p-1 border border-black text-center">{{ member.birthPlace }}</td>
              </tr>
              <tr>
                <td class="p-1 font-bold border border-black text-center">学历</td>
                <td class="p-1 border border-black text-center">高中/大学/其他</td>
                <td class="p-1 font-bold border border-black text-center">学位或职称</td>
                <td class="p-1 border border-black text-center">硕士/其他</td>
              </tr>
              <tr>
                <td class="p-1 font-bold border border-black text-center">单位职务或职业</td>
                <td colspan="4" class="p-1 border border-black text-center">东北大学软件学院学生</td>
              </tr>
              <tr>
                <td class="p-1 font-bold border border-black text-center">现居住地</td>
                <td colspan="4" class="p-1 border border-black text-center">东北大学浑南校区十舍A110</td>
              </tr>
              <tr>
                <td class="p-1 font-bold border border-black text-center">居民身份证号码</td>
                <td colspan="4" class="p-1 border border-black text-center">{{ member.idCardNumber }}</td>
              </tr>
            </tbody>
          </table>
          <div class="border border-black border-t-0 p-2">
            <p class="font-bold text-center">入 党 志 愿</p>
            <div class="leading-relaxed mt-2 min-h-[500px]">
              <p class="indent-8">我志愿加入中国共产党...</p>
            </div>
          </div>
        </div>

        <div id="page-5-experience"
          class="mx-auto max-w-[500px] w-full min-w-[500px] aspect-[210/297] bg-gray-50 shadow-lg rounded-md p-6 text-sm">
          <table class="w-full border-collapse border border-black">
            <thead>
              <tr class="font-bold text-center">
                <td colspan="4" class="p-1 border border-black">本人经历（包括学历）</td>
              </tr>
              <tr class="font-bold text-center">
                <td class="p-1 border border-black w-1/4">从何年何月</td>
                <td class="p-1 border border-black w-1/4">至何年何月</td>
                <td class="p-1 border border-black">在何地、何单位、任何职</td>
                <td class="p-1 border border-black w-1/5">证明人</td>
              </tr>
            </thead>
            <tbody>
              <tr class="text-center h-8">
                <td class="p-1 border border-black">1990年9月</td>
                <td class="p-1 border border-black">1996年8月</td>
                <td class="p-1 border border-black">某某小学 班长</td>
                <td class="p-1 border border-black">杨某某</td>
              </tr>
              <tr class="text-center h-8">
                <td class="p-1 border border-black">1996年9月</td>
                <td class="p-1 border border-black">1999年8月</td>
                <td class="p-1 border border-black">某某初中 学生</td>
                <td class="p-1 border border-black">陈某某</td>
              </tr>
              <tr class="text-center h-8">
                <td class="p-1 border border-black">1999年9月</td>
                <td class="p-1 border border-black">2002年8月</td>
                <td class="p-1 border border-black">某某高中 团支书</td>
                <td class="p-1 border border-black">黄某某</td>
              </tr>
              <tr class="text-center h-8">
                <td class="p-1 border border-black">2002年9月</td>
                <td class="p-1 border border-black">至今</td>
                <td class="p-1 border border-black">东北大学软件学院本科 学习委员</td>
                <td class="p-1 border border-black">李某某</td>
              </tr>
              <tr v-for="i in 15" :key="`exp-empty-${i}`" class="h-8">
                <td v-for="j in 4" :key="j" class="p-1 border border-black"></td>
              </tr>
            </tbody>
          </table>
        </div>

        <div id="page-6-history"
          class="mx-auto max-w-[500px] w-full min-w-[500px] aspect-[210/297] bg-gray-50 shadow-lg rounded-md p-6 text-sm">
          <table class="w-full h-full border-collapse border border-black">
            <tbody>
              <tr>
                <td class="p-2 font-bold w-1/3 border-r border-black">何时何地加入中国共产主义青年团</td>
                <td class="p-2 w-2/3">{{ formatDate(member.joinLeagueDate,'YYYY年MM月DD日')}}于某某中学加入</td>
              </tr>
              <tr class="border-t border-black">
                <td class="p-2 font-bold w-1/3 border-r border-black">何时何地参加过何种民主党派或工商联</td>
                <td class="p-2 w-2/3 text-center">无</td>
              </tr>
              <tr class="border-t border-black">
                <td class="p-2 font-bold w-1/3 border-r border-black ">何时何地参加过何种反动组织或封建迷信组织</td>
                <td class="p-2 w-2/3 text-center ">无</td>
              </tr>
              <tr class="border-t border-black">
                <td class="p-2 font-bold w-1/3 border-r border-black  ">何时何地何原因受过何种奖励</td>
                                <td class="p-2 w-2/3 text-center ">无</td>
              </tr>
              <tr class="border-t border-black">
                <td class="p-2 font-bold w-1/3 border-r border-black  ">何时何地何原因受过何种处分</td>
                <td class="p-2 w-2/3 text-center ">无</td>
              </tr>
            </tbody>
          </table>
        </div>

        <div id="page-7-relations"
          class="mx-auto max-w-[500px] w-full min-w-[500px] aspect-[210/297] bg-gray-50 shadow-lg rounded-md p-6 text-sm">
          <table class="w-full border-collapse border border-black" style="table-layout: fixed;">
            <colgroup>
              <col style="width: 40px;">
              <col style="width: 40px;">
              <col style="width: 11%;">
              <col style="width: 11%;">
              <col style="width: 22%;">
              <col style="width: 11%;">
              <col style="width: 22%;">
              <col style="width: 23%;">
            </colgroup>

            <tbody>
              <tr>
                <td class="p-1 font-bold text-center align-middle border border-black" style="writing-mode: vertical-rl"
                  rowspan="11">
                  家庭主要成员情况
                </td>
                <td class="p-1 font-bold text-center align-middle border border-black"
                  style="writing-mode: vertical-rl;" rowspan="4">
                  配偶
                </td>
                <td class="p-1 font-bold border border-black">姓名</td>
                <td class="p-1 border border-black">无</td>
                <td class="p-1 font-bold border border-black">民族</td>
                <td class="p-1 border border-black"></td>
                <td class="p-1 font-bold border border-black">出生年月</td>
                <td class="p-1 border border-black"></td>
              </tr>
              <tr>
                <td class="p-1 font-bold border border-black">籍贯</td>
                <td class="p-1 border border-black" colspan="2"></td>
                <td class="p-1 font-bold border border-black">学历</td>
                <td class="p-1 border border-black" colspan="2"></td>
              </tr>
              <tr>
                <td class="p-1 font-bold border border-black" colspan="2">参加工作时间</td>
                <td class="p-1 border border-black"></td>
                <td class="p-1 font-bold border border-black">政治面貌</td>
                <td class="p-1 border border-black" colspan="2"></td>
              </tr>
              <tr>
                <td class="p-1 font-bold border border-black" colspan="2">单位、职务或职业</td>
                <td colspan="5" class="p-1 border border-black"></td>
              </tr>

              <tr>
                <td class="p-1 font-bold text-center align-middle border border-black"
                  style="writing-mode: vertical-rl;" rowspan="7">
                  其他成员
                </td>
                <td class="p-1 font-bold border border-black text-center" colspan="2">关系</td>
                <td class="p-1 font-bold border border-black text-center" colspan="2">姓名</td>
                <td class="p-1 font-bold border border-black text-center">政治面貌</td>
                <td class="p-1 font-bold border border-black text-center" colspan="2">单位、职务或职业</td>
              </tr>
              <tr v-for="item in 6">
                <td class="p-1 border border-black h-10" colspan="2"></td>
                <td class="p-1 border border-black" colspan="2"></td>
                <td class="p-1 border border-black"></td>
                <td class="p-1 border border-black" colspan="2"></td>
              </tr>

              <tr>
                <td class="p-1 font-bold text-center align-middle border border-black"
                  style="writing-mode: vertical-rl;" rowspan="5" colspan="2">
                  主要社会关系情况
                </td>
                <td class="p-1 font-bold border border-black text-center" colspan="2">关系</td>
                <td class="p-1 font-bold border border-black text-center" colspan="2">姓名</td>
                <td class="p-1 font-bold border border-black text-center">政治面貌</td>
                <td class="p-1 font-bold border border-black text-center" colspan="2">单位、职务或职业</td>
              </tr>
              <tr v-for="item in 4">
                <td class="p-1 border border-black h-10" colspan="2"></td>
                <td class="p-1 border border-black" colspan="2"></td>
                <td class="p-1 border border-black"></td>
                <td class="p-1 border border-black" colspan="2"></td>
              </tr>
            </tbody>
          </table>
        </div>
        <div id="page-8-signature"
          class="mx-auto max-w-[500px] w-full min-w-[500px] aspect-[210/297] bg-gray-50 shadow-lg rounded-md p-6 text-sm flex flex-col">
          <table class="w-full h-full border-collapse border border-black">
            <colgroup>
              <col style="width: 10%;">
              <col style="width: 90%;">
            </colgroup>
            <tbody>
              <tr class="h-3/4">
                <td class="p-2 text-center align-middle border font-bold ">需要向党组织说明的问题</td>
                <td class="p-2 text-center align-middle border">无</td>
              </tr>
              <tr>
                <td colspan="2" class="p-2 border align-bottom text-right">
                  本人签名或盖章: {{ member.memberName }} &nbsp;&nbsp;&nbsp; {{
                    formatSignatureDate(member.applicationVolunteer?.personalSignatureDate) }}
                </td>
              </tr>
            </tbody>
          </table>
        </div>

        <div id="page-9-sponsors"
          class="mx-auto max-w-[500px] w-full min-w-[500px] aspect-[210/297] bg-gray-50 shadow-lg rounded-md p-6 text-sm flex flex-col justify-between">
          <table class="w-full h-full border-collapse border border-black">
            <tbody>
              <tr>
                <td class="w-10 p-1 font-bold text-center align-middle border-r border-black"
                  style="writing-mode: vertical-rl;" rowspan="6">
                  入党介绍人意见
                </td>
              </tr>
              <tr class="h-1/2">

              </tr>
              <tr>
                <td class="border-b">
                  <div class="px-2 flex justify-between items-center">
                    介绍人单位、职务、或职业：软件学院学生
                  </div>
                  <div class="px-2 flex justify-between items-center">
                    <span>签名或盖章: {{ member.applicationVolunteer?.sponsor1Signature }}</span>
                    <span>{{ formatSignatureDate(member.applicationVolunteer?.sponsor1SignatureDate) }}</span>
                  </div>
                </td>
              </tr>
                <tr class="h-1/2">

              </tr>

              <tr>
                <td>
                  <div class="px-2 flex justify-between items-center">
                    介绍人单位、职务、或职业：软件学院学生
                  </div>
                  <div class="px-2 flex justify-between items-center">
                    <span>签名或盖章: {{ member.applicationVolunteer?.sponsor2Signature }}</span>
                    <span>{{ formatSignatureDate(member.applicationVolunteer?.sponsor2SignatureDate) }}</span>
                  </div>
                </td>
              </tr>
            </tbody>
          </table>


        </div>

        <div id="page-10-approvals1"
          class="mx-auto max-w-[500px] w-full min-w-[500px] aspect-[210/297] bg-gray-50 shadow-lg rounded-md p-6 text-sm flex flex-col justify-between">
          <table class="w-full border-collapse border border-black flex-grow" style="height: 48%;">
     
            <tbody>
              <tr>
                <th class="p-1 font-bold text-center border-b border-black">支部大会通过接受申请人为预备党员的决议</th>
              </tr>
              <tr class="h-1/2">
                <td class="p-1 align-top"></td>
              </tr>
              <tr>
                <td class="text-right p-1">支部书记签名或盖章: {{ member.applicationVolunteer?.branchMeetingSecretaryName }}
                  &nbsp;&nbsp; {{ formatSignatureDate(member.applicationVolunteer?.branchMeetingSignatureDate) }}</td>
              </tr>
               <tr>
                <th class="p-1 font-bold text-center border border-black">上级党组织指派专人进行谈话情况和对申请人入党的意见</th>
              </tr>
              <tr style="height: 100%;">
                <td class="p-1 align-top"></td>
              </tr>
              <tr>
                <td class="text-right p-1">签名或盖章: &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{
                  formatSignatureDate(member.applicationVolunteer?.designatedTalkDate) }}</td>
              </tr>
            </tbody>
          </table>
 
        </div>

        <div id="page-11-approvals2"
          class="mx-auto max-w-[500px] w-full min-w-[500px] aspect-[210/297] bg-gray-50 shadow-lg rounded-md p-6 text-sm flex flex-col justify-between">
          <table class="w-full border-collapse border border-black flex-grow" style="height: 48%;">
        
            <tbody>
              <tr>
                <th class="p-1 font-bold text-center border-b border-black">总支部审查（审批）意见</th>
              </tr>
              <tr class="h-1/2">
                <td class="p-1 align-top"></td>
              </tr>
              <tr>
                <td class="text-right p-1">总支部书记签名或盖章: &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{
                  formatSignatureDate(member.applicationVolunteer?.generalBranchReviewDate) }}</td>
              </tr>
              <tr>
                <th class="p-1 font-bold text-center border border-black">基层党委审批意见</th>
              </tr>
              <tr style="height: 100%;">
                <td class="p-1 align-top"></td>
              </tr>
              <tr>
                <td class="text-right p-1">党委书记签名或盖章: &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{
                  formatSignatureDate(member.applicationVolunteer?.baseCommitteeApprovalOpinionDate) }}</td>
              </tr>
            </tbody>
          </table>
       
        </div>

        <div id="page-12-conversion"
          class="mx-auto max-w-[500px] w-full min-w-[500px] aspect-[210/297] bg-gray-50 shadow-lg rounded-md p-6 text-sm flex flex-col justify-between">
          <table class="w-full border-collapse border border-black flex-grow" style="height: 48%;">
            
            <tbody>
               <tr>
                <th class="p-1 font-bold text-center border-b border-black">支部大会通过预备党员能否转为正式党员的决议</th>
              </tr>
              <tr class="h-1/3">
                <td class="p-1 align-top"></td>
              </tr>
              <tr>
                <td class="text-right p-1">支部书记签名或盖章: {{
                  member.applicationVolunteer?.probationaryConversionResolutionSignature }} &nbsp;&nbsp; {{
                    formatSignatureDate(member.applicationVolunteer?.probationaryConversionResolutionDate) }}</td>
              </tr>
               <tr>
                <th class="p-1 font-bold text-center border border-black">总支部审查（审批）意见</th>
              </tr>
              <tr class="h-1/3">
                <td class="p-1 align-top"></td>
              </tr>
              <tr>
                <td class="text-right p-1">总支部书记签名或盖章: &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{
                  formatSignatureDate(member.applicationVolunteer?.generalBranchReviewProbationDate) }}</td>
              </tr>
              <tr>
                <th class="p-1 font-bold text-center border-b border-black">基层党委审批意见</th>
              </tr>
              <tr style="height: 100%;">
                <td class="p-1 align-top"></td>
              </tr>
              <tr>
                <td class="text-right p-1">党委书记签名或盖章: &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{
                  formatSignatureDate(member.applicationVolunteer?.baseCommitteeReviewProbationDate) }}</td>
              </tr>
            </tbody>
          </table>
          
        </div>

        


      </n-space>
    </div>
 <div class="absolute top-4 right-4 w-64 z-10">
      <div class=" p-4 rounded-lg shadow-md">
        <n-anchor :bound="500">
          <n-anchor-link title="封面" href="#page-1-cover" />
          <n-anchor-link title="说明" href="#page-2-instructions" />
          <n-anchor-link title="誓词" href="#page-3-oath" />
          <n-anchor-link title="基本信息与志愿" href="#page-4-info" />
          <n-anchor-link title="本人经历" href="#page-5-experience" />
          <n-anchor-link title="其他历史情况" href="#page-6-history" />
          <n-anchor-link title="家庭与社会关系" href="#page-7-relations" />
          <n-anchor-link title="本人签名" href="#page-8-signature" />
          <n-anchor-link title="入党介绍人意见" href="#page-9-sponsors" />
          <n-anchor-link title="接收预备党员审批" href="#page-10-approvals1" />
          <n-anchor-link title="总支与基层党委审批" href="#page-11-approvals2" />
          <n-anchor-link title="预备党员转正" href="#page-12-conversion" />
        </n-anchor>
      </div>
    </div>

  </div>
</template>

<script setup>
import { ref } from 'vue';
import { NSpace, NAnchor, NAnchorLink, NAffix } from 'naive-ui';
import { formatDate } from '@/utils/dateUtils';
const documentContainer = ref(null);

defineProps({
  member: {
    type: Object,
    required: true,
    default: () => ({ applicationVolunteer: {} })
  }
});

const formatSignatureDate = (dateStr) => {
  if (!dateStr) return '    年   月   日';
  const date = new Date(dateStr);
  const year = date.getFullYear();
  const month = date.getMonth() + 1;
  const day = date.getDate();
  return `${year}年 ${month}月 ${day}日`;
};
</script>